<template>
	<!-- 决策支持页面 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">生产信息分析</text></view>
					</template>
					<up-subsection :list="[{ name: '剥离土方量' }, { name: '原煤采量' }, { name: '采剥比' }]" :current="current" mode="subsection" @change="fn" />
					<view class="charts-box">
						<qiun-data-charts :type="type" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">产品质量分析</text></view>
					</template>
					<up-subsection :list="[{ name: '水分' }, { name: '硫' }, { name: '发热量' }]" :current="current1" mode="subsection" @change="fn1" />
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts1" :chartData="chartData1" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">经营信息分析</text></view>
					</template>
					<my-grid :list="list" :decimals="2" :col="2"></my-grid>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">人力资源概况</text></view>
					</template>
					<u-tabs
						lineWidth="30"
						lineColor="#2172FC"
						:list="[{ name: '职称' }, { name: '学历' }]"
						:activeStyle="{ color: '#2172FC', fontWeight: 'bold' }"
						@click="fn3"
						itemStyle="width:40px;height:44px"
						:current="current2"
					/>
					<view class="charts-box">
						<qiun-data-charts type="rose" :opts="opts3" :chartData="chartData3" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="5">
					<template #title>
						<view class="content-item-title"><text class="title-txt">生产环节分析及预测</text></view>
					</template>
					<up-subsection :list="[{ name: '钻孔作业' }, { name: '爆破作业' }, { name: '运输作业' }]" :current="current3" mode="subsection" @change="fn4" />
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts4" :chartData="chartData4" />
					</view>
				</u-collapse-item>
			</u-collapse>
			<up-back-top :scroll-top="scrollTop"></up-back-top>
		</view>
	</view>
</template>

<script setup>
import { getApiFabric, getByApiCode } from '@/api/customApi';
const showMoreKeys = ref([1, 2, 3, 4, 5]),
	collapse = ref(null);
/**************************************返回顶部*************************************************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

/**************************************生产信息分析*************************************************/
const current = ref(0);
const type = ref('column');
const chartData = ref({}),
	opts = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [25, 0, 0, 0],
		enableScroll: true,
		dataLabel: true,
		legend: {
			show: false
		},
		xAxis: {
			itemCount: 5
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万m³',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			column: {
				width: 20,
				linearType: 'opacity',
				linearOpacity: 0.5
			},
			area: {
				type: 'curve',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};

function fn(index = 0) {
	current.value = index;
	current.value == 2 ? (type.value = 'area') : (type.value = 'column');
	current.value == 1 ? (opts.yAxis.data[0].title = '万吨') : current.value == 2 ? (opts.yAxis.data[0].title = 'm³/吨') : (opts.yAxis.data[0].title = '万m³');
	let data = {
			apiCode: 'bennianbolitongji',
			propertyMapping: {
				x: 'riqi',
				y: 'chanliang'
			}
		},
		data1 = {
			apiCode: 'benniancaimeitongji',
			propertyMapping: {
				x: 'shijian',
				y: 'chanliang'
			}
		},
		data2 = {
			apiCode: 'benniancaibobitongji',
			propertyMapping: {
				x: 'month',
				y: 'stripping_mining_ratio'
			}
		};
	getByApiCode(current.value == 0 ? data : current.value == 1 ? data1 : data2).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y);
				return prev;
			},
			{
				categories: [],
				series1: []
			}
		);
		chartData.value = {
			categories: resData.categories,
			series: [
				{
					name: '',
					data: resData.series1
				}
			]
		};
	});
}

/**************************************产品质量分析*************************************************/
const current1 = ref(0);
const chartData1 = ref({}),
	opts1 = {
		color: ['#1890FF', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [10, 0, 0, 0],
		enableScroll: true,
		dataLabel: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 0,
			fontSize: 10,
			itemGap: 10
		},
		xAxis: {
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			column: {
				width: 20,
				linearType: 'opacity',
				linearOpacity: 0.5
			}
		}
	};

function fn1(index = 0) {
	current1.value = index;
	let data = {
			apiCode: 'chanpinzhiliangfenxi1',
			propertyMapping: {
				x: 'bz',
				y1: 'qsf',
				y2: 'kqgzsf'
			}
		},
		data1 = {
			apiCode: 'chanpinzhiliangfenxi1',
			propertyMapping: {
				x: 'bz',
				y1: 'gjql',
				y2: 'sdjql'
			}
		},
		data2 = {
			apiCode: 'chanpinzhiliangfenxi1',
			propertyMapping: {
				x: 'bz',
				y1: 'kgjgwfrl',
				y2: 'sdjdwfrl'
			}
		};
	getByApiCode(current1.value == 0 ? data : current1.value == 1 ? data1 : data2).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.y2);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData1.value = {
			categories: resData.categories,
			series: [
				{
					name: current1.value == 0 ? '全水分' : current1.value == 1 ? '干基全硫' : '空干基高位发热量',
					data: resData.series1
				},
				{
					name: current1.value == 0 ? '空气干燥基水分' : current1.value == 1 ? '收到基全硫' : '收到基低位发热量',
					data: resData.series2
				}
			]
		};
	});
}

/**************************************经营信息分析*************************************************/
let list = ref([
	{
		title: '上月成品煤销售额',
		value: 0,
		unit: '万元'
	},
	{
		title: '上月企业成本费用',
		value: 0,
		unit: '万元'
	}
]);
const chartData2 = ref({}),
	opts2 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		dataLabel: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 10,
			itemGap: 10
		},
		title: {
			name: 0,
			fontSize: 25,
			color: '#000'
		},
		subtitle: false,
		extra: {
			ring: {
				ringWidth: 20,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
				linearType: 'custom'
			}
		}
	};

function fn2() {
	getByApiCode({
		apiCode: 'shanggeyueqiyexiaoshoue',
		propertyMapping: {
			xse: 'xse'
		}
	}).then((res) => {
		list.value[0].value = res.data[0].xse;
	});
	getByApiCode({
		apiCode: 'shangeyueqiyechengbenfeiyong',
		propertyMapping: {
			cb: 'cb'
		}
	}).then((res) => {
		list.value[1].value = res.data[0].cb;
	});
	getByApiCode({
		apiCode: 'jingyingxinxifenxi',
		propertyMapping: {
			s: 'lb',
			y: 'value'
		}
	}).then((res) => {
		let total = 0;
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			total = total + item.value;
			delete item.s;
			delete item.y;
		});
		opts2.title.name = total.toFixed();
		chartData2.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

/**************************************人力资源概况*************************************************/
const current2 = ref(0);
const chartData3 = ref({}),
	opts3 = {
		...opts2,
		extra: {
			rose: {
				type: 'radius',
				minRadius: 50,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 2,
				borderColor: '#FFFFFF',
				linearType: 'custom'
			}
		}
	};
function fn3(val = { index: 0 }) {
	current2.value = val.index;
	let data = {
			apiCode: 'jueceguanlizhichengjiegou',
			propertyMapping: {
				s: 'zc',
				y: 'rs'
			}
		},
		data1 = {
			apiCode: 'renYuanWenHuaChengDu',
			propertyMapping: {
				s: 'mingcheng',
				y: 'renshu'
			}
		};
	getByApiCode(current2.value == 0 ? data : data1).then((res) => {
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			delete item.s;
			delete item.y;
		});
		chartData3.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

/**************************************生产环节分析及预测*************************************************/
const current3 = ref(0);
const chartData4 = ref({}),
	opts4 = {
		...opts1,
		dataLabel: false,
		extra: {
			area: {
				type: 'curve',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};
function fn4(index = 0) {
	chartData4.value = {};
	current3.value = index;
	let data = {
			apiCode: '0a65caf1-88b5-4721-ae2f-efcb11a1a79f',
			propertyMapping: {
				x: 'month',
				y1: 'actualVal',
				y2: 'predictVal'
			}
		},
		data1 = {
			apiCode: '9e00236a-545f-4848-8a44-8b6265d9f6f1',
			propertyMapping: {
				x: 'month',
				y1: 'actualVal',
				y2: 'predictVal'
			}
		},
		data2 = {
			apiCode: 'cheliangmeiyuetangshu',
			propertyMapping: {
				x: 'month',
				y1: 'wrclts',
				y2: 'yrclts'
			}
		};
	if (current3.value == 2) {
		getByApiCode(data2).then((res) => {
			const resData = res.data.reduce(
				(prev, cur) => {
					if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
					prev.series1.push(cur.y1);
					prev.series2.push(cur.y2);
					return prev;
				},
				{
					categories: [],
					series1: [],
					series2: []
				}
			);
			chartData4.value = {
				categories: resData.categories,
				series: [
					{
						name: '无人车趟数',
						data: resData.series1
					},
					{
						name: '有人车趟数',
						data: resData.series2
					}
				]
			};
		});
	} else {
		getApiFabric(current3.value == 0 ? data : data1).then((res) => {
			const resData = res.data.reduce(
				(prev, cur) => {
					if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
					prev.series1.push(cur.y1);
					prev.series2.push(cur.y2);
					return prev;
				},
				{
					categories: [],
					series1: [],
					series2: []
				}
			);
			chartData4.value = {
				categories: resData.categories,
				series: [
					{
						name: current3.value == 0 ? '钻孔数量实际' : '炸药实际用量',
						data: resData.series1
					},
					{
						name: current3.value == 0 ? '钻孔数量预测' : '炸药预测用量',
						data: resData.series2
					}
				]
			};
		});
	}
}

function getServerData(refresh) {
	Promise.all([fn(), fn1(), fn2(), fn3(), fn4()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style scoped lang="scss"></style>
